<template>
  <div class="embodimentApplication">
    <div class="title">
      <p class="title-one">注意：1、提现申请需在1-2个工作日内完成审核</p>
      <p class="title-two">
        2、审核提现订单时需仔细核对提现金额与账户入账金额是否相符。
      </p>
    </div>
    <div class="search">
      <div class="search-inp-box">
        <div class="item-box">
          <span class="search-text">订单编号</span>
          <input
            v-model="orderNoValue"
            type="text"
            name=""
            id=""
            placeholder="请输入订单编号"
          />
        </div>
        <div class="item-box">
          <span class="search-text">日期</span>
          <el-date-picker
            v-model="dateVuale"
            type="date"
            placeholder="选择日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd">
          ></el-date-picker>
        </div>
        <div class="item-box">
          <span class="search-text">状态</span>
          <el-select v-model="stateValue" placeholder="请选择">
            <el-option
              v-for="item in stateOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>
        <div class="item-box">
        <div class="search-btn" style='margin-left:0'>
          <span class="my-btn" @click="search" :class="colorBlue == 0?'my-back-blue':''" @mousemove="mouseMove(0)">筛选</span>
          <span class="btn" @click="emptyClick" :class="colorBlue == 1?'my-back-blue':''" @mousemove="mouseMove(1)">清空</span>
          <!-- <span class="btn" @click="exportClick" :class="colorBlue == 2?'my-back-blue':''" @mousemove="mouseMove(2)">导出</span> -->
        </div>
        </div>
      </div>
    </div>
    <div class="table">
      <el-table :data="arr" stripe border style="width: 100%">
        <el-table-column prop="shopName" type='index' label="序号"></el-table-column>
        <el-table-column  prop="withdrawalCode"  label="提现订单编号"></el-table-column>
        <el-table-column  prop="collectionName"  label="用户名"></el-table-column>
        <el-table-column  prop="chargePersonPhone"  label="联系方式"></el-table-column>
        <el-table-column  prop="withdrawalMoney"  label="提现金额" width="80"></el-table-column>
        <el-table-column  prop="handlingFee"  label="提现手续费" width="100"></el-table-column>
        <el-table-column  prop="realityMoney"  label="实际到账金额" width="110"></el-table-column>
        <el-table-column  prop="withdrawalMoney"  label="消耗简分" width="80"></el-table-column>
        <el-table-column  prop="number"  label="剩余简分" width="80"></el-table-column>
        <el-table-column prop="applyTime" label="申请时间"></el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span>{{scope.row.state==0?'待处理':scope.row.state==1?'已处理(打款中)':scope.row.state==2?'已拒绝':'已打款'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="80">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text"
              >详情</el-button>
          </template>
        </el-table-column>
      </el-table>
     <el-pagination  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page="currentPage4"  :page-sizes="[5, 10, 15, 20]"  :page-size="pageSize"  layout="total, sizes, prev, pager, next, jumper"  :total="total"></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colorBlue:0,
      orderNoValue: "", //订单编号
      stateValue: "", //状态
      dateVuale: "", //日期
      currentPage4:1,//跳转到第几页
      stateOptions: [//状态
        { label: "待处理", value: "0" },
        { label: "已处理（打款中）", value: "1" },
        { label: "已拒绝", value: "2" },
        { label: "已打款", value: "3" },
      ],
      arr: [],
      total:0,
      page:1,
      pageSize:5
    };
  },
  mounted() {
       this.loadList()
  },
  methods: {
      //切换按钮样式
        mouseMove(index) {
            this.colorBlue = index;
        },
     //清空
        emptyClick(){
            this.orderNoValue=''
            this.data=''
            this.stateValue=''
            this.dateVuale=''
            this.loadList()
        },
        // 筛选
        search(){
           this.loadList()
        },
        //详情
        handleClick(row){
            this.$router.push({
              path:'/index/embodimentDetail/',
              query:{	withdrawalId:row.withdrawalId}
            })
        },
      //分页
        handleSizeChange(val) {
            this.pageSize=val
            this.loadList()
        },
          handleCurrentChange(val) {
            this.page=val
            this.loadList()
        },
    // 获取提现列表
        loadList() {
          var param = {
              page: this.page,
              pageSize: this.pageSize,
              state: this.stateValue,
              withdrawalCode:this.orderNoValue,
              applyTime:this.dateVuale
          };
          this.axios({
            url: "/siteWithdrawal/orderList",
            method: "post",
            data: JSON.stringify(param),
          }).then((res) => {
            this.arr = res.data.data.list;
            this.total=res.data.data.total
          });
      },
  },
  watch: {},
};
</script>

<style scoped>
.embodimentApplication .title {
  margin-top: 15px;
}
.embodimentApplication p {
  padding-left: 0 10px;
}
.embodimentApplication .title-two {
  text-indent: 3rem;
}

.search {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.search-inp-box {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  align-items: baseline;
}
.item-box {
  margin: 8px 0;
}
.search-text {
  display: inline-block;
  width: 75px;
  text-align: right;
  padding-right: 15px;
  font-size: 15px;
  color: #555;
}
.search-btn {
  margin-top: 10px;
  width: 210px;
  margin-left: 20px;
}
.search-btn span {
  font-size: 15px;
  display: inline-block;
  padding: 6px 14px;
  margin: 0 5px;
  border-radius: 2px;
  cursor: pointer;
}
.search-btn span:hover {
  color: #777;
}
.search-btn span:first-child:hover {
  color: #eee;
}
.btn {
  border: 1px solid #ddd;
}
</style>